  <!-- <div>
    <h1>商品审核</h1>
  </div> -->
<template>
  <div>
    <div class="clear" id="spsh_header">
      <div>
        <el-button type="primary">全部商品(<span>3000</span>)</el-button>
        <el-button>已通过(<span class="red">1000</span>)</el-button>
        <el-button>待审核(<span class="red">1000</span>)</el-button>
        <el-button>未通过(<span class="red">1000</span>)</el-button>
      </div>
      <div id="header_right" class="clear">
        <el-button type="primary">导入商品</el-button>
        <div>下载模版：<el-link type="primary">主要链接</el-link>
        </div>
      </div>
    </div>
    <div id="spsh">
      <div id="spsx">
        <div id="spsx_header" class="clear">
          <div>筛选查询</div>
          <div id="sq" @click="sq">收起 ∧ </div>
          <div id="zk" @click="zk" class="yc">展开 ∨ </div>
        </div>
        <div id="spsx_content" class="clear">
          <div>
            <label for="">名称关键词</label>
            <el-input v-model="searchFrom.spmc" placeholder="请输入内容"></el-input>
          </div>
          <div>
            <label for="">品牌</label>
            <el-select v-model="searchFrom.pp" placeholder="请选择">
              <el-option v-for="(item,i) in options_pp" :key="i" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div>
            <label for="">状态</label>
            <el-select v-model="searchFrom.zt" placeholder="请选择">
              <el-option v-for="(item,i) in options_zt" :key="i" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <!-- <div>
            <span class="demonstration">分类</span>
            <el-cascader v-model="value" :options="options_3" @change="handleChange"></el-cascader>
          </div> -->

        </div>
        <div id="spsx_footer">
          <button @click="cz">重置</button>
          <button @click="sx">筛选</button>
        </div>
      </div>
      <div id="sjlb">
        <div id="sjlb_header" class="clear">
          <div>数据列表</div>
          <div id="sjlb_header_right" class="clear">
            <!--  <div>
              <label for="">排序方式</label>
              <select name="" id="">
                <option value="">全部</option>
                <option value="">按时间顺序</option>
                <option value="">按时间倒序</option>
              </select>
            </div>
            <div>
              <label for="">批量操作</label>
              <select name="" id="">
                <option value="">全部</option>
                <option value="">可删除</option>
              </select>
            </div>
            <button>审核</button> -->
            <button @click="tjtk=true">添加审核</button>
          </div>
        </div>
        <div id="sjlb_content">
          <el-table :data="spshData" border style="width: 100%" :default-sort="{prop: 'id', order: 'ascendant'}">
            <el-table-column type="selection" width="auto" min-width="3%">
            </el-table-column>
            <el-table-column prop="id" label="ID" width="auto" min-width="5%">
            </el-table-column>
            <el-table-column prop="sptp" label="商品图片" width="auto" min-width="9%" sortable>
              <div style="width:130px;height:78px;text-align:center;">
                <img src="	http://localhost:8080/getImg?sort=assets/image/Women/Skirt4.jpg" style="width:98px;background-repeat:no-repeat;background-size:cover;overflow:hidden;" alt="">
              </div>
            </el-table-column>
            <el-table-column prop="spmc" label="商品名称" width="auto" min-width="11%" sortable>
            </el-table-column>
            <el-table-column prop="hh" label="货号" width="auto" min-width="6%" sortable>
            </el-table-column>
            <el-table-column prop="jg" label="价格" width="auto" min-width="8%" sortable>
            </el-table-column>
            <el-table-column prop="fl" label="分类" width="auto" min-width="6%" sortable>
            </el-table-column>
            <el-table-column prop="pp" label="品牌" width="auto" min-width="5%" sortable>
            </el-table-column>
            <el-table-column prop="zt" label="状态" width="auto" min-width="5%" sortable>
            </el-table-column>
            <el-table-column label="操作" width="auto" min-width="10%">
              <div slot-scope="scope">
                <el-button type="text" size="small" @click="shtkData(scope.row)">审核</el-button>
                <el-button type="text" size="small" @click="bjtkData(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="sctk(scope.row)">删除</el-button>
              </div>
            </el-table-column>
          </el-table>
        </div>
        <div id="sjlb_footer">
          <!--         <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[5,10,20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="100">
          </el-pagination> -->
        </div>
      </div>
    </div>
    <div id="tk_tj">
      <el-dialog title="添加审核" :visible.sync="tjtk" width="70%" :before-close="tkgb">
        <el-form :model="ruleForm" ref="ruleForm" label-width="130px" class="demo-ruleForm">
          <el-form-item label="商品名称" prop="spmc">
            <el-input v-model="ruleForm.spmc"></el-input>
          </el-form-item>
          <el-form-item label="货号" prop="hh">
            <el-input v-model="ruleForm.hh"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="jg">
            <el-input v-model="ruleForm.jg"></el-input>
          </el-form-item>
          <el-form-item label="分类" prop="fl">
            <el-input v-model="ruleForm.fl"></el-input>
          </el-form-item>
          <el-form-item label="品牌" prop="pp">
            <el-radio-group v-model="ruleForm.pp">
              <el-radio label="品牌A"></el-radio>
              <el-radio label="品牌B"></el-radio>
              <el-radio label="品牌C"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="tj('ruleForm')">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div id="tk_bj">
      <el-dialog title="编辑审核" :visible.sync="bjtk" width="70%" :before-close="tkgb">
        <el-form :model="ruleForm" ref="ruleForm" label-width="130px" class="demo-ruleForm">
          <el-form-item label="商品名称" prop="spmc">
            <el-input v-model="ruleForm.spmc"></el-input>
          </el-form-item>
          <el-form-item label="货号" prop="hh">
            <el-input v-model="ruleForm.hh"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="jg">
            <el-input v-model="ruleForm.jg"></el-input>
          </el-form-item>
          <el-form-item label="分类" prop="fl">
            <el-input v-model="ruleForm.fl"></el-input>
          </el-form-item>
          <el-form-item label="品牌" prop="pp">
            <el-radio-group v-model="ruleForm.pp">
              <el-radio label="品牌A"></el-radio>
              <el-radio label="品牌B"></el-radio>
              <el-radio label="品牌C"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="bj">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div id="tk_sh">
      <el-dialog title="审核状态" :visible.sync="shtk" width="70%" :before-close="tkgb">
        <el-form :model="ruleForm" ref="ruleForm" label-width="130px" class="demo-ruleForm">
          <el-form-item label="审核意见" prop="zt">
            <el-radio-group v-model="ruleForm.zt">
              <el-radio label="已通过"></el-radio>
              <el-radio label="待处理"></el-radio>
              <el-radio label="未通过"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="sh">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<style lang="less" scoped>
.clear::after {
  content: "";
  display: block;
  clear: both;
}
.yc {
  display: none;
}
#sq,
#zk {
  cursor: pointer;
}
#sq:hover,
#zk:hover {
  color: #409eff;
}
#spsh > div {
  border: 1px solid #dcdfe6;
  font-size: 15px;
}
#spsh button {
  cursor: pointer;
}
#spsx > div {
  padding: 15px;
}
#spsx_header {
  background-color: rgb(242, 242, 242);
}
#spsx_header > div:nth-child(1) {
  float: left;
}
#spsx_header > :not(div:nth-child(1)) {
  float: right;
  margin-right: 40px;
}
#spsx_content > div {
  float: left;
  width: 30%;
}
#spsx_content > div:nth-child(2) {
  margin: 0 5%;
}
#spsx_content > div > :nth-last-child(1) {
  padding: 5px;
  width: 50%;
  margin-left: 15px;
}
#spsx_footer > button {
  padding: 10px 40px;
  border: none;
  color: white;
  background-color: rgb(102, 102, 102);
  border-radius: 5px;
}
#spsx_footer > button:nth-child(1) {
  background-color: rgb(204, 204, 204);
  margin: 0 5% 0 30%;
}
#sjlb {
  background: rgb(242, 242, 242);
  margin-top: 10px;
}
#sjlb > div {
  padding: 15px;
}
#sjlb_header > div:nth-child(1) {
  float: left;
}
#sjlb_header_right {
  float: right;
}
#sjlb_header_right > div {
  float: left;
}
#sjlb_header_right > div:nth-child(2) {
  margin: 0 10px;
}
#sjlb_header_right > div > select {
  margin: 0 10px;
  padding: 6px;
  border: none;
  border-radius: 5px;
  width: 120px;
}
#sjlb_header_right > button {
  background: white;
  border: 1px solid rgb(204, 204, 204);
  padding: 5px 30px;
}
/deep/ .el-table .cell,
/deep/ .el-pagination {
  text-align: center;
}
/deep/ .el-cascader .el-input .el-input__inner {
  width: 250px;
  margin-top: 20px;
}
.red {
  color: red;
}
/deep/ .el-button {
  margin: 10px 30px 30px 0;
  float: left;
}
#header_right,
#header_right div {
  float: right;
}
#header_right div {
  margin: 20px 0 30px 0;
}
</style>

<script>
export default {
  data() {
    return {
      // options: [{
      //   value: '选项1',
      //   label: '全部'
      // }, {
      //   value: '选项2',
      //   label: '品牌A'
      // }, {
      //   value: '选项3',
      //   label: '品牌B'
      // }],
      // options_2: [{
      //   value: '选项1',
      //   label: '全部'
      // }, {
      //   value: '选项2',
      //   label: '已通过'
      // }, {
      //   value: '选项2',
      //   label: '待审核'
      // }, {
      //   value: '选项3',
      //   label: '未通过'
      // }],
      // value_3: [],
      // options_3: [{
      //   label: '一级分类A',
      //   children: [{
      //     value_3: 'A-A',
      //     label: '二级分类A-A'
      //   }, {
      //     value_3: 'A-B',
      //     label: '二级分类A-B'
      //   }, {
      //     value_3: 'A-C',
      //     label: '二级分类A-C'
      //   }]
      // }, {
      //   label: '一级分类B',
      //   children: [{
      //     value_3: 'B-A',
      //     label: '二级分类B-A'
      //   }, {
      //     value_3: 'B-B',
      //     label: '二级分类B-B'
      //   }, {
      //     value_3: 'B-C',
      //     label: '二级分类B-C'
      //   }]
      // }, {
      //   label: '一级分类C',
      //   children: [{
      //     value_3: 'C-A',
      //     label: '二级分类C-A'
      //   }, {
      //     value_3: 'C-B',
      //     label: '二级分类C-B'
      //   }, {
      //     value_3: 'C-C',
      //     label: '二级分类C-C'
      //   }]
      // }],
      value: '',
      input: '',
      spshData: [],
      tjtk: false,
      bjtk: false,
      shtk: false,
      ruleForm: {
        spmc: '',
        hh: '',
        jg: '',
        fl: '',
        pp: '',
        zt: ''
      },
      options_pp: [{
        value: '全部',
        label: ''
      }, {
        value: '品牌A',
        label: ''
      }, {
        value: '品牌B',
        label: ''
      }, {
        value: '品牌C',
        label: ''
      }],
      options_zt: [{
        value: '全部',
        label: ''
      }, {
        value: '待审核',
        label: ''
      }, {
        value: '已通过',
        label: ''
      }, {
        value: '未通过',
        label: ''
      }],
      searchFrom: {
        spmc: '',
        pp: '全部',
        zt: '全部'
      },
    }
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
    },
    sq() {
      document.querySelector("#spsx_content").classList.add('yc')
      document.querySelector("#spsx_footer").classList.add('yc')
      document.querySelector("#sq").classList.add('yc')
      document.querySelector("#zk").classList.remove('yc')
    },
    zk() {
      document.querySelector("#spsx_content").classList.remove('yc')
      document.querySelector("#spsx_footer").classList.remove('yc')
      document.querySelector("#sq").classList.remove('yc')
      document.querySelector("#zk").classList.add('yc')
    },
    getallspsh(data = {}) {/* 刷新数据 */
      this.$axios({
        url: '/goods/getallspsh',
        method: 'get',
        params: data
      }).then((res) => {
        let data = res.data.data;
        this.spshData = data;
        this.ruleForm = {
          spmc: '',
          hh: '',
          jg: '',
          fl: '',
          pp: '',
          zt: ''
        }
      })
    },
    tkgb(done) {/* 弹框关闭提示 */
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    tj(formName) {/* 添加弹框 */
      this.$axios({
        url: '/goods/spshtj',
        method: 'post',
        data: this.ruleForm
      }).then((res) => {
        this.tjtk = false;
        this.getallspsh();
      })
    },
    sctk(data) {/* 删除提示弹框 */
      this.$confirm('确认删除该信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.del(data);
      })
    },
    del(data) {/* 数据删除方法 */
      this.$axios({
        url: '/goods/spshsc',
        method: 'post',
        data: data
      }).then(() => {
        this.getallspsh();
      })
    },
    bjtkData(data) {/* 编辑弹框数据传递 */
      if (data.zt == '待审核') {
        this.bjtk = true;
        this.ruleForm = { ...data };
      } else {
        this.$alert('该商品审核已处理，无法编辑', '提示', {
          confirmButtonText: '确定',
        })
      }
    },
    bj(res) {/* 确认编辑 */
      this.$axios({
        url: '/goods/spshbj',
        method: 'post',
        data: this.ruleForm
      }).then(() => {
        this.bjtk = false;
        this.getallspsh();
      })
    },
    shtkData(data) {/* 审核弹框数据传递 */
      if (data.zt == '待审核') {
        this.shtk = true;
        this.ruleForm = { ...data };
      } else {
        this.$alert('该商品审核已处理', '提示', {
          confirmButtonText: '确定',
        })
      }

    },
    sh(res) {/* 确认审核 */
      this.$axios({
        url: '/goods/spshsh',
        method: 'post',
        data: this.ruleForm
      }).then(() => {
        this.shtk = false;
        this.getallspsh();
      })
    },
    sx() {/* 筛选 */
      let from = { ...this.searchFrom };
      this.getallspsh(from);
    },
    cz() {/* 重置 */
      this.searchFrom = {
        spmc: '',
        pp: '全部',
        zt: '全部'
      }
      this.getallspsh();
    },
  },
  mounted() {/* 默认运行数据刷新 */
    this.getallspsh();
  },
}
</script>


